<template>
  <view>
    <view>
      <uv-tabs
        :list="list"
        @click="click"
        :current="current"
        :itemStyle="{ margin: '5vw 0vw' }"
        lineColor="white"
        :activeStyle="{
          color: '#FD7601',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        :inactiveStyle="{
          color: '#7B7B7B',
          transform: 'scale(0.9)',
        }"
      >
      </uv-tabs>
      <uni-swiper-dot
        class="uni-swiper-dot-box"
        @clickItem="clickItem"
        :info="list"
        :current="current"
        mode="dot"
        :dotsStyles="dotStyle"
        field="content"
      >
        <swiper
          @change="change"
          next-margin="80rpx"
          :current="swiperDotIndex"
          class="big"
          style="height: 145.4vw; display: flex; overflow: auto"
          ref="huadon"
        >
          <swiper-item
            class="concent"
            style="margin-left: 4.3vw; height: 114.4vw"
            v-for="(item, i) in list"
            :key="i"
          >
            <view
              class="main"
              :style="{
                'background-image': 'url(' + getbackgroundImg(list, i) + ')',
                'background-size': 'cover',
              }"
            >
              <text
                style="
                  font-size: 6.93vw;
                  color: white;
                  position: absolute;
                  top: 32vw;
                  left: 8.26vw;
                "
                >{{ item.name }}</text
              >
              <text
                style="
                  font-size: 3.73vw;
                  font-weight: normal;
                  position: relative;
                  width: 50.93vw;
                  display: block;
                  height: 10.66vw;
                  top: 45.33vw;
                  left: 8.26vw;
                  color: white;
                "
                >{{ item.desc }}</text
              >
              <view class="bottom">
                <text
                  style="
                    color: white;
                    font-size: 4.26vw;
                    position: relative;
                    top: 86.8vw;
                    left: 8.26vw;
                  "
                  >扫描二维码领取权益></text
                >

                <image
                  style="
                    width: 20.53vw;
                    height: 20.53vw;
                    position: absolute;
                    right: 4.26vw;
                    bottom: 4.26vw;
                    z-index: 999;
                  "
                  :src="$wanlshop.appstr(item.qrcode_img)"
                  mode="aspectFit"
                ></image>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
      <text
        style="
          position: absolute;
          left: 8.8vw;
          top: 134.06vw;
          color: #6a6a6a;
          font-size: 3.46vw;
        "
        >白银会员、黄金会员、铂金会员、钻石会员可享</text
      >

      
	  
	  <view style="
	          width: 120rpx;
			  height: 40rpx;
		      position: absolute;
		      left: 0;
		      right: 0;
		      margin: 0 auto;
		      bottom: 80rpx;
			  display: flex;
			  align-items: center;
		    ">
      <view style="display: flex; align-items: center;" @tap="$wanlshop.auth(`/pages/user/moreBenefits/rule`)">
        <image
          style="width: 28rpx;height: 28rpx;"
          class="wanl-live-footer-bottom_goods-btn"
          src="/static/images/user/rule.png"
        ></image>
        <view style="margin-left: 10rpx;">规则</view>
      </view>
	  </view>

      <!-- 客服小组件 -->
      <view @tap="$wanlshop.auth('/pages/user/service')">
        <view
          class="kefu-img"
          :style="{
            background: `url(${$wanlshop.oss(common.appStyle.im_icon)})`,
          }"
          style="
            width: 90rpx;
            height: 90rpx;
            background-size: cover !important;
            position: absolute;
            bottom: 100rpx;
            :0 ;
            right: 0;
          "
        ></view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      dotStyle: {
        width: 10,
        height: 10,
        bottom: 0,
        backgroundColor: "#EDEDED",
        border: "1px rgba(0, 0, 0, .3) solid",
        color: "#fff",
        selectedBackgroundColor: "#FD7601",
        selectedBorder: "1px #FD7601 solid",
      },

      modeIndex: -1,
      styleIndex: -1,
      current: 0,
      mode: "default",
      dotsStyles: {},
      swiperDotIndex: 0,
      list: [],
    };
  },

  onLoad(options) {
    this.current = options.id - 1;
    this.swiperDotIndex = this.current;
  },

  onShow() {
    this.loadViplist();
  },
  computed: {
    ...mapState(["common", "user", "update"]),
  },

  methods: {
	routerPath () {
		uni.switchTab({
			url: '/pages/user/moreBenefits/rule'
		});
	},
    getbackgroundImg(list, index) {
      let res = list.filter((res, keys) => {
        return index == keys;
      });

      let url = this.$wanlshop.appstr(res[0].bg_img);

      console.log(url, "return----------methods");

      return url;
      // return {
      // 	'background-image': `url(${url})`,
      // 	'background-size': 'cover',
      // 	'background-repeat': 'no-repeat',
      // };
    },
    // 获取会员相关
    async loadViplist() {
      this.$api.get({
        url: "/wanlshop/common/init",
        data: {
          version: "1.1.1",
        },
        success: (res) => {
          this.list = res.modulesData.advantage;
          console.log(this.list);
        },
      });
    },
    change(e) {
      this.current = e.detail.current;
    },

    clickItem(e) {
      // console.log(this.swiperDotIndex)
      this.swiperDotIndex = e;
    },
    onBanner(index) {
      console.log(22222, index);
    },
    click(item) {
      // console.log(this.swiperDotIndex);
      let Index = 0;
      this.list.forEach(function (e, i) {
        // console.log(e, item)

        if (e.name == item.name) {
          Index = i;
        }
      });
      this.swiperDotIndex = Index;

      // console.log(this.list, item);
    },
  },
};
</script>

<style scoped>
.concent .main {
  width: 83.73vw;
  height: 114.4vw;
  border-radius: 5.33vw;
  position: relative;
}

.kefu-img {
  background-size: cover !important;
}
</style>